<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini" onload="checkBrowser()">


<!--选择外购件库存模态框-->
<div class="modal fade" id="modal-select-purchase">
    <div class="modal-dialog" style="width: 1350px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">外购件库在库明细信息</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 5px;padding-top: 0px;">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header" style="padding-bottom: 0px;">
                                <form id="modalQueryForm">
                                    <div class="row" id="HiddenDiv">
                                        <div class="form-inline">
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>项目编号</label>
                                                <input type="text" id="ityProCode" name="ityProCode"
                                                       class="form-control"
                                                       placeholder="请输入项目编号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>项目名称</label>
                                                <input type="text" id="ityProName" name="ityProName"
                                                       class="form-control"
                                                       placeholder="请输入项目名称">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>
                                                    SAP物料编码
                                                </label>
                                                <input type="text" id="itySapCode" name="itySapCode"
                                                       class="form-control"
                                                       placeholder="SAP请输入物料编码">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>
                                                    物料描述
                                                </label>
                                                <input type="text" id="ityMatDesc" name="ityMatDesc"
                                                       class="form-control"
                                                       placeholder="请输入物料描述">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>跟踪号</label>
                                                <input type="text" id="ityTrackCode" name="ityTrackCode"
                                                       class="form-control"
                                                       placeholder="请输入跟踪号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>
                                                    库位
                                                </label>
                                                <input type="text" id="ityPosition" name="ityPosition"
                                                       class="form-control"
                                                       placeholder="请输入库位">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>仓库</label>
                                                <select id="ityWhiId"
                                                        style="padding: 0px!important;text-align: center!important;text-align-last: center!important;"
                                                        class="form-control select" name="ityWhiId">
                                                </select>
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <label>生产状态</label>
                                                <select id="proProductionStatus" name="proProductionStatus"
                                                        style="padding: 0px!important;text-align: center!important;text-align-last: center!important;width: 100px!important;"
                                                        class="form-control select">
                                                    <option value="" selected="selected">全部</option>
                                                    <option value="-1">无状态</option>
                                                    <option value="1">未开始</option>
                                                    <option value="2">执行中</option>
                                                    <option value="3">已完成</option>
                                                    <option value="4">取消</option>
                                                    <option value="5">暂缓</option>
                                                </select>
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 5px">
                                                <button type="button" class="btn btn-success" id="btn_inventorySearch">搜索</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="box-body"
                                 style="height: 350px">
                                <table id="inventoryQueryTable" class="table table-bordered " width="100%"
                                       data-height="350">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button type="button" class="btn btn-success" id="btn-selectMaterial-commit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<section class="content-header">
    <h1 style="display: inline-block" id="title">添加盘点计划明细</h1>
    <button onclick="javascript:window.history.back();" type="button" class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" class="form-horizontal">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="padding-right: 10px;padding-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        计划编号
                                    </label>

                                    <input name="cpnCode" type="text" class="form-control text" maxlength="255"
                                           th:value="${cpnCode}" placeholder="请输入计划编号" readonly="readonly"/>
                                    <input name="model" type="hidden" th:value="${mode}">

                                </div>
                                <div class="form-group" style="padding-right: 10px;padding-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        项目编号
                                    </label>
                                    <input name="cdlProCode" type="text" class="form-control text"
                                           placeholder="请输入项目编号"/>
                                </div>
                                <div class="form-group" style="padding-right: 10px;padding-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        项目名称
                                    </label>
                                    <input name="cdlProName" type="text" class="form-control text"
                                           placeholder="请输入项目名称"/>

                                </div>
                                <div class="form-group" style="padding-right: 10px;padding-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        物料描述
                                    </label>
                                    <input name="cdlMatDesc" type="text" class="form-control text"
                                           placeholder="请输入物料描述"/>
                                </div>
                                <div class="form-group" style="padding-right: 10px;padding-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        区位
                                    </label>
                                    <input name="cdlPosition" type="text" class="form-control text"
                                           placeholder="请输入区位"/>
                                </div>
                                <div class="form-group" style="padding-right: 10px;padding-bottom: 5px">
                                    <label class="control-label" style="text-align: right">
                                        仓库
                                    </label>
                                    <select name="cdlMatWhiId" type="text" class="form-control select2"
                                            style="padding: 0px!important;text-align: center!important;text-align-last: center!important;">
                                    </select>
                                </div>
                                <div class="form-group"
                                     style="padding-right: 10px;padding-bottom: 5px">
                                    <button type="button" class="btn btn-success" id="btn-search">搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row" id="toolbar">
                    <button type="button" shiro:hasPermission="purinv:purcheckadd:edit" class="btn btn-info"
                            id="btn_add_check_detail">添加盘点明细
                    </button>
                    <button type="button" shiro:hasPermission="purinv:purcheckadd:edit"
                            class="btn btn-danger" id="btn_remove_check_detail">批量删除
                    </button>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" class="table table-bordered " width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table;
    var modalTable;
    var statusText = ["无状态", "执行中", "未开始", "暂缓", "已完成", "取消"];


    function checkBrowserFun() {
        let is360 = false;
        let isIE = false;
        let isFirefox = false;
        let isChrome = false;
        let isEdge = false;
        let broName = 'Runing';
        let str = '';
        let strStart = 0;
        let strStop = 0;
        let arr = new Array();
        let temp = '';
        let userAgent = window.navigator.userAgent; //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform
        /*alert(userAgent);*/
        //FireFox
        if (userAgent.indexOf('Firefox') != -1) {
            isFireFox = true;
            /*broName = 'FireFox浏览器';*/
            strStart = userAgent.indexOf('Firefox');
            temp = userAgent.substring(strStart);
            broName = temp.replace('/', '版本号')

        }
        //Edge
        if (userAgent.indexOf('Edge') != -1) {
            isEdge = true;
            /*broName = 'Edge浏览器';*/
            strStart = userAgent.indexOf('Edge');
            temp = userAgent.substring(strStart);
            broName = temp.replace('/', '版本号');
        }
        //IE浏览器
        if (userAgent.indexOf('NET') != -1 && userAgent.indexOf("rv") != -1) {
            isIE = true;
            /*broName = 'IE浏览器'; */
            strStart = userAgent.indexOf('rv');
            strStop = userAgent.indexOf(')');
            temp = userAgent.substring(strStart, strStop);
            broName = temp.replace('rv', 'IE').replace(':', '版本号');
        }
        //360极速模式可以区分360安全浏览器和360极速浏览器
        if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") < 0 && userAgent.indexOf("Firefox") < 0) {
            if (navigator.javaEnabled()) {
                is360 = true;
                broName = '360安全浏览器-极速模式';
            } else {
                is360 = true;
                broName = '360极速浏览器-极速模式';
            }
        }
        //360兼容
        if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") != -1 && userAgent.indexOf("MSIE") != -1 && userAgent.indexOf("rv") < 0) {
            is360 = true;
            broName = '360兼容模式';
        }
        //Chrome浏览器
        if (userAgent.indexOf('WOW') < 0 && userAgent.indexOf('Chrome') > 0 && userAgent.indexOf("Edg") < 0) {
            isChrome = true;
            /*broName = 'Chrome浏览器';*/
            strStart = userAgent.indexOf('Chrome');
            strStop = userAgent.indexOf(' Safari');
            temp = userAgent.substring(strStart, strStop);
            broName = temp.replace('/', '版本号');
        }
        return isChrome;
    }

    /**
     * 检测浏览器
     * */
    function checkBrowser(){
        if(!checkBrowserFun()){
            js.modal.warning("尊敬的客户，您使用浏览器不是谷歌浏览器，请使用谷歌浏览器访问本系统！");
            location.href=ctx+"overview/index";
        }
    }
    /**
     *@FunctionName: findWarehouseList
     *@Description: 获取仓库列表
     *@Author: 徐一贺
     *@CreateDate: 2020/3/24 15:31
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function findWarehouseList() {
        js.ajax({
            url: ctx + 'common/warehouseInfo/list',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {},
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    $("#queryForm [name='cdlMatWhiId']").empty();
                    $("#queryForm [name='cdlMatWhiId']").append('<option value="">全部</option>');
                    $("#ityWhiId").empty();
                    $("#ityWhiId").append('<option value="">全部</option>');
                    for (var i = 0; i < result.data.rows.length; i++) {
                        $("#queryForm [name='cdlMatWhiId']").append('<option value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                        $("#ityWhiId").append('<option value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                    }
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        })
    }

    function selectMode() {
        if ($("#queryForm [name='model']").val() == "view") {
            $("#btn_add_check_detail").remove();
            $("#btn_remove_check_detail").remove();
            $("#title").html("查看盘点计划明细");
        }
    }


    /**
     *@FunctionName: search
     *@Description: 查询
     *@Author: 徐一贺
     *@CreateDate: 2020/4/10 16:10
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function search() {
        js.table.search(table);
    }

    /**
     *@FunctionName: selectAll
     *@Description: 全选/全不选
     *@Author: 徐一贺
     *@CreateDate: 2020/4/25 16:34
     *@Phone: 18241927380
     *@Param: [obj] 全选复选框Dom
     *@Version: 1.0.0
     */
    function selectAll2(obj) {
        if ($(obj).prop("checked")) {
            $('input[name="cb_detail"]').prop("checked", true);

            $('#bootstrap-table tbody tr').each(function () {
                $(this).addClass("info");
            });
        }
        if ($(obj).prop("checked") == false) {
            $('input[name="cb_detail"]').prop("checked", false);
            $('#bootstrap-table tbody tr').each(function () {
                $(this).removeClass("info");
            });
        }
    }

    $(function () {
        $("title").html($("title").html()+" —— 添加盘点计划明细");
        selectMode();
        findWarehouseList();
        var columnsOption = new Array();
        if ($("#queryForm [name='model']").val() == "view") {
            columnsOption = [

                {
                    title: '序号', field: 'cdlId', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '物料描述', field: 'cdlMatDesc'},
                {title: '在库数量', field: 'cdlItyNum'},
                {title: '项目编号', field: 'cdlProCode', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }},
                {title: '项目名称', field: 'cdlProName', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }},
                {title: '仓库', field: 'cdlMatWhiName'},
                {title: '区位', field: 'cdlPosition'}
            ]
        } else {
            columnsOption = [
                {
                    title: '<input title="全选" onclick="selectAll2(this)" type="checkbox" />',
                    width: '30',
                    field: 'cdlId',
                    formatter: function (value, row, index) {
                        var checkHtml = '<input id="' + 'cb_detail_' + row.cdlId + '" name="cb_detail" data="' + row.cdlId + '"  type="checkbox" />';
                        return checkHtml;
                    }
                },
                {
                    title: '序号', field: 'cdlId', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '物料描述', field: 'cdlMatDesc'},
                {title: '在库数量', field: 'cdlItyNum'},
                {title: '项目编号', field: 'cdlProCode', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }},
                {title: '项目名称', field: 'cdlProName', formatter: function (value, row, index) {
                        if (value == undefined || value == null) {
                            value = "--";
                        }
                        return value;
                    }},
                {title: '仓库', field: 'cdlMatWhiName'},
                {title: '区位', field: 'cdlPosition'},
                {
                    title: '操作', field: 'cdlId', width: '90',
                    formatter: function (value, row, index) {
                        var htmlText = "";
                        if (row.cdlStatus == 1) {
                            if (hasP('purinv:purcheckadd:edit')) {
                                htmlText += '<button onclick="removeCheckDetail(' + row.cdlId + ')" class="btn btn-xs btn-danger">删除</button>';
                            }
                        }
                        return htmlText;
                    }
                }
            ]
        }


        //加载列表数据
        table = js.table.init({
            id: 'bootstrap-table',
            url: ctx + "purchase/check/detail/list",
            showColumns: true,
            showExport: false,
            pageSize: 300,
            striped: false,
            uniqueId: "cdlId",
            onLoadSuccess: function (data) {
                $('#bootstrap-table thead th').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
                $('#bootstrap-table tbody tr:first td').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
            },
            columns: columnsOption
        });

        /**
         * 批量删除
         */
        $("#btn_remove_check_detail").on('click', function () {
            var cdlIds = "";
            $('input[name="cb_detail"]').each(function (index, data) {
                if ($(this).prop("checked")) {
                    cdlIds += $(this).attr("data") + ",";
                }
            });
            cdlIds = cdlIds.substring(0, cdlIds.length - 1);
            if (cdlIds.length > 0) {
                js.modal.confirm("您确认要删除所选的盘点计划明细吗?", function () {
                    $.post(ctx + 'purchase/check/detail/removes', {
                        cdlIds: cdlIds
                    }, function (result) {
                        if (result.type == 'SUCCESS') {
                            js.table.refresh(table);
                            js.modal.success(result.msg);
                        } else if (result.type == 'ERROR') {
                            js.modal.warning(result.msg);
                        }
                    }, 'json');
                });
            } else {
                js.modal.warning("请选择要删除所选的盘点计划明细！");
            }
        });
        /**
         * 表格搜索
         */
        $("#btn-search").on('click', function () {
            js.table.search(table);
        });
        /**
         *@Description: 新增盘点明细
         *@Author: 徐一贺
         *@CreateDate: 2020/4/25 8:01
         *@Phone: 18241927380
         *@Version: 1.0.0
         */
        $("#btn_add_check_detail").on('click', function () {
            $('input[name="cb_inventory"]').prop("checked", false);
            $("#inventoryQueryTable tbody tr").removeClass('info');
            //加载列表数据
            modalTable = js.table.init({
                id: 'inventoryQueryTable',
                url: ctx + "purWarOutManage/inventoryList",
                sortable: true,                                    // 是否启用排序
                sortStable: true,                                  // 设置为 true 将获得稳定的排序
                showColumns: true,
                showExport: false,
                pageSize: 15,
                queryForm: 'modalQueryForm',
                toolbar:'',
                onClickRow: function (row, $element) {
                    if ($('#cb_inventory_' + row.ityId).prop("checked")) {
                        $('#cb_inventory_' + row.ityId).prop("checked", false);
                        $($element).removeClass('info');
                    } else {
                        $('#cb_inventory_' + row.ityId).prop("checked", true);
                        $($element).addClass('info');
                    }
                },
                onLoadSuccess: function () {
                    $('#inventoryQueryTable thead th').each(function () {
                        $(this).width(Math.floor($(this).width()));
                    });
                    $('#inventoryQueryTable tbody tr:first td').each(function () {
                        $(this).width(Math.floor($(this).width()));
                    });
                },
                columns: [
                    {
                        title: '<input title="全选" onclick="selectAll(this)" type="checkbox" />',
                        width: '40',
                        field: 'ityDataStatus',
                        formatter: function (value, row, index) {
                            var ityDataStatus = "";
                            if (value == 2) {
                                ityDataStatus = 'disabled';
                            } else {
                                ityDataStatus = '';
                            }
                            return '<input ' + ityDataStatus + ' id="' + 'cb_inventory_' + row.ityId + '" name="cb_inventory" data="' + row.ityId + '"  type="checkbox" />';
                        }
                    },
                    {
                        title: '序号', field: 'ityId', width: '40',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: '物料编码', field: 'itySapCode', width: '120'},
                    {title: '物料描述', field: 'ityMatDesc', width: '200'},
                    {title: '数量', field: 'ityNum', sortable: true},
                    {title: '可用数量', field: 'ityAvaNum', sortable: true},
                    {title: '单位', field: 'ityNumUnit'},
                    {title: '跟踪号', field: 'ityTrackCode'},
                    {
                        title: '项目名称', field: 'ityProName', width: '200', formatter: function (value, row, index) {
                            if (value == undefined || value == null) {
                                value = "--";
                            }
                            return value;
                        }
                    },
                    {title: '项目编号', field: 'ityProCode', formatter: function (value, row, index) {
                            if (value == undefined || value == null) {
                                value = "--";
                            }
                            return value;
                        }},
                    {
                        title: '生产状态', field: 'proProductionStatus',
                        formatter: function (value, row, index) {
                            if (value == undefined || value == null) {
                                value = 0;
                            }
                            return statusText[value];
                        }
                    },
                    {
                        title: '特殊说明', field: 'ityRemark',
                        formatter: function (value, row, index) {
                            if (value == undefined || value == null) {
                                return "";
                            }
                            return value;
                        }
                    },
                    {title: '仓库', field: 'whiName'},
                    {title: '库位', field: 'ityPosition'}
                ]
            });


            /**
             * 表格搜索
             */
            $("#btn_inventorySearch").on('click', function () {
                js.table.search(modalTable);
            });
            //打开添加模态框
            js.modal.open("modal-select-purchase");
        });

    });


    /**
     *@FunctionName: selectAll
     *@Description: 全选/全不选
     *@Author: 徐一贺
     *@CreateDate: 2020/4/25 16:34
     *@Phone: 18241927380
     *@Param: [obj] 全选复选框Dom
     *@Version: 1.0.0
     */
    function selectAll(obj) {
        if ($(obj).prop("checked")) {
            $('input[name="cb_inventory"]').prop("checked", true);
        }
        if ($(obj).prop("checked") == false) {
            $('input[name="cb_inventory"]').prop("checked", false);
        }
    }


    /**
     *@FunctionName: removeCheckDetail
     *@Description: 删除
     *@Author: 徐一贺
     *@CreateDate: 2020/4/21 13:09
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function removeCheckDetail(cdlId) {
        js.modal.confirm("您确认要删除此盘点明细吗？", function () {
            $.post(ctx + 'purchase/check/detail/remove', {
                cdlId: cdlId
            }, function (result) {
                if (result.type == "SUCCESS") {
                    js.table.refresh(table);
                }
            }, 'json');
        });
    }


    /**
     * 提交库存明细信息到盘点明细表格
     */
    $('#btn-selectMaterial-commit').on('click', function () {
        var ityIds = '';
        $('input[name="cb_inventory"]').each(function (index, data) {
            if ($(this).prop("checked")) {
                ityIds += $(this).attr("data") + ",";
            }
        });
        ityIds = ityIds.substring(0, ityIds.length - 1);
        $.post(ctx + "purchase/check/detail/create",
            {
                cpnCode: $("#queryForm [name='cpnCode']").val(),
                ityIds: ityIds
            },
            function (result) {
                if (result.type == 'SUCCESS') {
                    js.modal.success(result.msg);
                    js.modal.hide('modal-select-purchase');
                    js.table.refresh(table);
                } else {
                    js.modal.fail(result.msg);
                }
            },
            'json'
        );
    });
</script>
</body>
</html>
